<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div class="m-alarm">
        <p style="padding-top: 10px;color:gray;font-size: 12px;">管家调配</p>
      </div>
      <div
        v-for="item in list"
        :key="item.id"
        class="m-cost"
      >
        <div class="m-cost-cell">
          <p style="width: 100%;"> {{ item.name }}</p>
          <van-dropdown-menu style="width: 100%;">
            <van-dropdown-item ref="item" :title="item.keeper">
              <div style="padding: 5px 16px;">
                <van-field v-model="item.plan" label="管家" />
                <van-button type="danger" block round @click="onConfirm">
                  确认
                </van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>

      </div>
    </van-list>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import DropdownMenu from 'vant/lib/dropdown-menu'
import 'vant/lib/dropdown-menu/style'
import DropdownItem from 'vant/lib/dropdown-item'
import 'vant/lib/dropdown-item/style'
import Field from 'vant/lib/field'
import 'vant/lib/field/style'
// import { mapGetters } from 'vuex'
// import { getShopClerks } from '@/api/txs'

export default {
  components: {
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Field.name]: Field
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    // ...mapGetters(['openId'])
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
    onLoad () {
      this.loading = false
      // getShopClerks(this.openId).then(res => {
      //   this.list = res.data.data
      // })
      this.list = [
        { name: '顾客一', status: 0, keeper: '大管家' },
        { name: '顾客二', status: 0, keeper: '张三' },
        { name: '顾客三', status: 1, keeper: '李四' },
        { name: '顾客四', status: 1, keeper: '大管家' }
      ]
      this.finished = true
    },
    onConfirm () {}
  }
}
</script>
<style lang="scss" scoped>
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  // line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 1px rgb(201, 201, 201);
  // margin-bottom: 3px;
  .m-cost-cell{
    display: flex;
    // justify-content: center;
    // width: 100%;
    // padding: 0 50px 0 50px;
  }
}
.m-alarm {
    background-color: #fff;
    color:#1989fa;
    font-size: 30px;
    // line-height: 40px;
    text-align: center;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-top: -40px;
    margin-bottom: -15px;
    padding-bottom: 10px;
}
</style>
